<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./elm_demo/css/shopping.css">
</head>
<body>
    <div class="shopping" id="app">

        <!-- 页首 -->
        <div class="header">商 家 信 息</div>

        <!-- 商户信息 -->
        <div class="first">
            <div class="icon-location-box" id="image">
                <img class="icon-location" src="./elm_demo/img/sj01.png" alt="" id="p">    
            </div>
            <div id="s01">万家饺子（软件园E18店）</div>
            <div id="s02">￥15元起送 ￥3配送</div>
            <div id="s02">各种饺子炒菜</div>
        </div>

        <!-- 商户菜单 -->
        <ul class="menu-list">
            <li v-for="(item,index) in list">
                <a class="menu-item flex">
                    <!-- 菜品图片 -->
                    <img :src="item.logo" alt="">
                    <!-- 菜品信息 -->
                    <div class="text">
                        <div class="name flex">{{item.name}}</div>
                        <div class="material">{{item.material}}</div>
                        <div class="money">
                            <span>￥</span>
                            <span>
                                {{item.money}}
                            </span>
                        </div>
                    </div>
                    <div class="AD flex">
                        <input type="button" value="-" class="minute" @click="minute(index)">
                        <input class="qua" v-model="item.num">
                        <input type="button" value=" + " class="add" @click="add(index)">
                    </div>
                </a>
            </li>
            <div class="null"></div>
        </ul>
        <div class="footer flex">
            <!--已获得数量-->
			<div class="num">
                <div class="PP"></div>
                <div class="RP">{{num}}</div>
            </div>
			<!--总价-->
			<div class="money">
                <div class="m1">￥{{money}}</div>
                <div class="m2">另需配送费3元</div>
            </div>
			<!--结算-->
			<button class="sub" onclick="sub()">去结算</button>
        </div>
    </div>
    <!-- js -->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script>
        function sub(){
            window.location.href="http://127.0.0.1:5501/subb.html";
            // 设置localStorage
            window.localStorage.setItem(money);
        }
    </script>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                //默认总价
				money: 0,
				//默认总数量
                num: 0,
                //商品数据库
                list: []
            },
            // 当页面首次加载的时候会自动加载这个函数
            created: function () {
                fetch('http://127.0.0.1:5501/elm_demo/api/shopping.json')
                    .then(function (res) {
                        return res.json()
                    }).then(function (data) {
                        vm.list = data;
                    })

                    var price = 0;
					var numb = 0;
					var list = this.list;
					for(var i = 0; i < list.length; i++) {
						if(list[i].selected) {
							price += list[i].num * list[i].money;
							numb += list[i].num;
						}
					}
					this.money = price;
					this.num = numb;
					console.log(numb);
					console.log(price);
            },
            methods: {
				//总价总数量方法   方便调用   再次多写了一次[可以跟初始化封装为一个方法]
                hh: function() {
					var price = 0;
					var numb = 0;
					var list = this.list;
					for(var i = 0; i < list.length; i++) {
						if(list[i].selected) {
							price += list[i].num * list[i].money;
							numb += list[i].num;
						}
					}
					this.money = price;
					this.num = numb;
                    console.log(numb);
				},
				//删除购物车列表
				delerte: function(index) {
					this.list.splice(index, 1);
				},
				//选中未选中
				radios: function(index) {
					var list = this.list;
					list[index].selected = !list[index].selected;
					this.hh();
					console.log(list[index].selected)
				},
				//添加
				add: function(index) {var list = this.list;
					var num = list[index].num;
					num = num + 1;
					list[index].num = num;
					this.hh();
				},
				//减去
				minute: function(index) {
					var list = this.list;
					var num = list[index].num;
					if(num > 1) {
						num = num - 1;
						list[index].num = num;
					}
					this.hh();
				},	
					
			}
        })
    </script>
</body>
</html>